<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <link rel="stylesheet" href="css/style.css">
    
    <script>
        // 如何设置以及获取HTML的方本和值
       $(function(){
       //事件的绑定 
         // $('#p h1.header').bind('click',function(){
         //    // 当我点击h1的时候让它下面的div显示出来
         //    $(this).next().show();
         // })

        //  $('#p h1.header').bind('mouseover',function(){
        //     // 当我点击h1的时候让它下面的div显示出来
        //     $(this).next().show();
        //  }).bind('mouseout',function(){
        //     $(this).next().hide();
        //  })

        //另一种写法
        $('#p h1.header').mouseover(function(){
            $(this).next().show();
            }).mouseout(function(){
            $(this).next().hide();
            })
       }) 
    </script>
    </head>
    <body>
        <div id="p">
            <h1 class="header">为什么要使用JQuery</h1>
            <div class="content">
                一个元素失去焦点将触发blur事件。起初，这个事件仅适用于表单元素，如元素<input> 。在最新的浏览器中，这个事件适用范围已经扩大到包括所有元素类型。一个元素可以通过键盘命令失去焦点，比如tab键，或用鼠标点击网页上的其他地方。
            </div>
        </div>
    </body>
    </html>
